<script>
import MAIN_STORE from "@/store/store.js";
import { CloseBold, Location, Download } from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus'
import { MeasureConnect } from "@/utils/Measure";
import mitt from "mitt";
import { ref, reactive } from "vue";
import SelfDraggable from '@/components/Draggable/Draggable.vue';
import Api from '@/Api'
let mittBus = null;
function getListData(data) {
  const filtersAttr = ['pointion']
  const keys = Object.keys(data || {}).filter(v => {
    return filtersAttr.indexOf(v) === -1;
  })
  const listData = keys.map(v => { return { key: v, value: data[v] } })
  return listData
}
export default {
  /**
   * 连通性
   */
  name: "decision-connect",
  components: { CloseBold, Location, SelfDraggable, Download },
  data() {
    return {
      dialogDrawer: false,
      // 表单
      realForm: {
        radius: 50,
        type: 'point'
      },
      // 是否正在绘制
      isPainting: false,
      // 是否有查询的数据
      dataForPaint: [],
      bufferForm: {
        "pointA": {
          "WYDH": "", "GXXZ": "", "tableName": "AllResultNetWork_Node"
        },
        "pointB": {
          "WYDH": "", "GXXZ": "", "tableName": "AllResultNetWork_Node"
        }
      },
      // 查出来的标记
      connectionTags: [],
      // 选中的项 id
      selectedId: null,
      listData: [],
      colorOfLine: 'rgba(19, 206, 102, 0.8)',
      isQuerying: false
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
  },
  watch: {
    visible: function (nV) {
      if (!nV) {
        const ins = MeasureConnect.getIns();
        ins && ins.destroy();
        this.connectionTags = [];
        this.bufferForm = {
          "pointA": {
            "WYDH": "", "GXXZ": "", "tableName": "AllResultNetWork_Node"
          },
          "pointB": {
            "WYDH": "", "GXXZ": "", "tableName": "AllResultNetWork_Node"
          }
        }
        this.selectedId = null;
      }
    }
  },
  mounted() {
  },
  beforeUnmount() {
    mittBus && mittBus.all.clear();
    mittBus = null;
    const ins = MeasureConnect.getIns();
    ins && ins.destroy();
    this.selectedId = null;
  },
  methods: {
    // 开始选中点
    selectPoint() {
      this.connectionTags = [];
      this.bufferForm = {
        "pointA": {
          "WYDH": "", "GXXZ": "", "tableName": "AllResultNetWork_Node"
        },
        "pointB": {
          "WYDH": "", "GXXZ": "", "tableName": "AllResultNetWork_Node"
        }
      }
      // 如果正在绘制
      if (this.isPainting) {
        // 结束绘制
        this.isPainting = false;
        // 销毁绘制实例
        const ins = MeasureConnect.getIns();
        ins && ins.destroy();
      } else {
        // 开始绘制
        this.isPainting = true;
        // 生成绘制实例
        let ins = MeasureConnect.getIns();
        if (!ins) {
          mittBus = mitt();
          ins = MeasureConnect.create({
            map: MAIN_STORE.GLOBAL_MAP_INS,
            mittBus: mittBus
          });
          // ins.handleClickCalcDistance();
          ins.mittBus.on('getPoint', ({ data }) => {
            console.log(data)
            if (data.length === 2) {
              this.bufferForm.pointA.WYDH = data[0]['物探点号'];
              this.bufferForm.pointA.GXXZ = data[0]['gxxz'];
              this.bufferForm.pointB.WYDH = data[1]['物探点号'];
              this.bufferForm.pointB.GXXZ = data[1]['gxxz'];
            } else {

            }
            // const g_ = geometry.map(v => {
            //   return [v[0], v[1], 0]
            // });
            // this.bufferForm.drawPoints.coordinates = [g_];
            this.queryConnect()
          })

          ins.mittBus.on('message', ({ data }) => {
            ElMessage({
              message: data,
              type: 'warning',
            })
          })

          ins.mittBus.on('destroy', ({ data }) => {
            // 结束绘制
            this.isPainting = false;
            // 销毁绘制实例
            const ins = MeasureConnect.getIns();
            ins && ins.destroy();
          })
        }
      }
    },
    // 数据查询
    async queryConnect() {
      // if (!this.bufferForm.polygon) { return }
      this.selectedId = null;
      this.dataForPaint = []
      this.isQuerying = true;
      const res = await Api.getAnaliseNormal({
        url: '/iobject/pipe_analyse/connect',
        data: this.bufferForm
      })
      if (res.succ || res.success) {
        ElMessage({
          message: res.oper,
          type: 'success',
        })
        this.connectionTags = res.data
      } else {
        ElMessage({
          message: res.oper || res.message,
          type: 'warning',
        })
        this.connectionTags = []
      }
      this.isQuerying = false;
    },
    close() {
      this.isPainting = false;
      this.$emit('close')
    },
    getDetail(data, scope) {
      const ins = MeasureConnect.getIns();
      if (!ins) { return }
      this.listData = getListData(data)
      this.dialogDrawer = true;
      this.getPos(data, scope, this.listData)
    },
    // 定位
    getPos(data, scope, listData) {
      this.selectedId = scope.$index;
      const coordinates = [data.pointion.x, data.pointion.y];
      this.$store.commit("LOCATION_CERTAIN_VIEW", {
        position: coordinates,
        accu: true
      });
      const ins = MeasureConnect.getIns();
      if (!ins) { return }
      // 设置用于定位的 overlay
      ins.setOverlayForLocate({
        coordinate: coordinates,
        listData: listData || getListData(data)
      });
    },
    closeDrawer() {
      this.dialogDrawer = false;
    },
    download() {
      this.$store.commit('DOWNLOAD_EXCELL_DATA', {
        data: this.dataForPaint,
        title: dayjs().format('YYYY-MM-DD')
      })
    }
  },
};
</script>

<template>
  <div class="search-buffer">
    <div class="header">
      <span>连通分析</span>
      <div class="function-area">
        <div v-if="dataForPaint.length" class="icon-area hover-pointer" @click="download">
          <Download></Download>
        </div>
        <div class="icon-area hover-pointer" @click="close">
          <CloseBold></CloseBold>
        </div>
      </div>

    </div>
    <el-form size="small" inline :model="realForm" label-width="40px">
      <el-form-item>
        <el-button text size="small" type="primary" @click="selectPoint">
          {{ isPainting ? '清除' : '绘制连通点' }}
        </el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-descriptions :column="2" title="" direction="vertical" border>
        <!-- <el-descriptions-item v-for="(item, index) in listData" :key="index" :label="item.key">{{ item.value
          }}</el-descriptions-item> -->
        <el-descriptions-item align="center" label="起点号">
          <el-tag :type="bufferForm.pointA.WYDH? 'primary': 'info'">
            {{ bufferForm.pointA.WYDH || '暂无数据' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item align="center" label="终点号">
          <el-tag :type="bufferForm.pointB.WYDH? 'primary': 'info'">
            {{ bufferForm.pointB.WYDH || '暂无数据' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item
          align="center"
          label="途经点号">
          <div class="tags-wrapper" v-if="connectionTags.length">
            <el-tag type="primary" v-for="(item, index) in connectionTags" :key="index">{{ item }}</el-tag>
          </div>
          <el-tag type="info" v-else>
            {{ isQuerying? '正在分析...': '暂无数据' }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <!-- <el-table :data="dataForPaint" stripe style="width: 100%" max-height="250" :empty-text="emptyText">
        <el-table-column prop="管线类型" label="管线类型" width="120" />
        <el-table-column prop="管径" label="管径" width="120" />
        <el-table-column prop="管线材质" label="管线材质" width="100" />
        <el-table-column prop="管线编号" label="管线编号" width="100" />
        <el-table-column prop="是否规范" label="是否规范" />
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button link :type="selectedId === scope.$index ? 'success' : 'primary'" size="small"
              @click="getDetail(scope.row, scope)">详情</el-button>
            <el-button link :type="selectedId === scope.$index ? 'success' : 'primary'" size="small"
              @click="getPos(scope.row, scope)">
              定位
            </el-button>
          </template>
</el-table-column>
</el-table> -->
    </div>
    <!-- <el-drawer v-model="dialogDrawer" title="详细信息" :before-close="closeDrawer" direction="rtl" class="demo-drawer">
      <div class="demo-drawer__content">
        <el-descriptions :column="2" title="" border>
          <el-descriptions-item v-for="(item, index) in listData" :key="index" :label="item.key">{{ item.value
            }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-drawer> -->
  </div>
</template>
<style></style>
<style lang="less" scoped>
:deep(.demo-drawer .el-drawer__body) {
  --el-drawer-padding-primary: 0;
}

:deep(.demo-drawer .el-drawer__header) {
  margin-bottom: 20px;
}

.search-buffer {
  &>.header {
    font-size: 16px;
    color: #2168b2;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &>.function-area {
      display: inline-flex;

      &>.icon-area {
        width: 20px;
        height: 20px;
      }
    }
  }
}
.tags-wrapper {
  max-height: 100px;
  overflow-y: auto;
  text-align: left;
  &>span {
    margin-right: 10px;
  }
}
</style>
